<template>
  <div>
    <Tabs size="large">
      <TabPane key="BASIC">
        <template #tab><Icon icon="material-symbols:inbox-rounded" />基本设置</template>
        <BasicSetting />
      </TabPane>
      <TabPane key="EMAIL">
        <template #tab><Icon icon="material-symbols-light:mail" />发送邮件</template>
        <EmailSetting />
      </TabPane>
      <TabPane key="NOTICE">
        <template #tab><Icon icon="material-symbols-light:mark-chat-unread" />通知</template>
        <NoticeSetting />
      </TabPane>
      <TabPane key="QUEUE">
        <template #tab><Icon icon="icon-park-solid:s-turn-down" />队列</template>
        <QueuesTable />
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts" setup>
  import { Tabs, TabPane } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import BasicSetting from './components/basicSetting/BasicSetting.vue';
  import NoticeSetting from './components/noticeSetting/NoticeSetting.vue';
  import EmailSetting from './components/emailSetting/EmailSetting.vue';
  import QueuesTable from './components/queues/QueuesTable.vue';
</script>
<style lang="less" scoped>
  :deep(.ant-tabs-nav) {
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 4px;
    background-color: white;
    height: 48px;
    // width: 50%;
    min-width: 700px;
  }
  :deep(.ant-tabs-tab) {
    margin-left: 16px;
    margin-right: 16px;
    width: 25%;
  }
</style>
